<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Data Explorer</title>
    <!-- CSS DECLARATIONS -->
    <link type="text/css" href="css/redmond/jquery-ui-1.8.5.custom.css" rel="stylesheet" />
    <link type="text/css" href="css/defaultStyle.css" rel="stylesheet" />

    <!-- JAVASCRIPT -->
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.5.custom.min.js"></script>
    <script type="text/javascript" src="js/jquery.jsonp-2.1.3.min.js"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/keydragzoom/2.0.5/src/keydragzoom_packed.js"></script>
    <script type="text/javascript" src="js/app/utility.js"></script>
    <script type="text/javascript" src="js/app/visualElements.js"></script>
    <script type="text/javascript" src="js/app/errorElements.js"></script>
    <script type="text/javascript" src="js/app/control.js"></script>
  </head>
  <body onload="initialize()">
    <!-- MAIN CONTENT AREA: CENTERED -->
    <div id="contents">
      <!-- DATA EXPLORER TEXT AREA -->
      <div id="textArea">
          <label for="tags" style="font: 200% 'Trebuchet MS', sans-serif;">
            Data Explorer </label>
          <input id="tags" />
          <input type="submit" onclick="searchButtonSelectEvent();" value="Search" />
      </div>
      <!-- DATA EXPLORER VISUAL MODE SELECTION -->
      <div id="radio">
	<input type="radio" id="radio1" name="radio" checked="checked" />
        <label for="radio1">Map</label>
	<input type="radio" id="radio2" name="radio" />
        <label for="radio2" id="radio2L">*</label>
	<input type="radio" id="radio3" name="radio" />
        <label for="radio3" id="radio3L">*</label>
      </div>
 
      <!-- DATA EXPLORER MAP AREA -->
      <div id="mapArea" class="ui-widget-content ui-corner-all">
        <div id="map_canvas"></div>
        <div id="radio2_canvas"></div>
        <div id="radio3_canvas"></div>
      </div>

      <!-- DATA EXPLORER NOTIFY AREA -->
      <div id="notifyArea"></div>

      <!-- DATA EXPLORER DATA AREA -->
      <div id="dataArea">
        <!-- TABS ELEMENT -->
        <div id="tabs">
	    <ul>
	      <li><a href="#tabs-1">Available Datasets</a></li>
	      <li><a href="#tabs-2">Results</a></li>
	    </ul>
	    <!-- AVAILABLE DATASETS TAB: ACCORDION ELEMENT -->
	    <div id="tabs-1">
              <p style="text-align: center;"><b>New!</b> Shift + drag performs a spatial window search.</p>
	      <div id="accordion">
		<h3><a href="#">An Empty Dataset</a></h3>
		<div><p>This is dataset 1.</p></div>
		<h3><a href="#">FAA Web Service</a></h3>
		<div><p>The FAA Web Service is a web service that allows end-users to  query the current known delays in the National Airspace system as well as the current weather from NOAA by airport code.</p></div>
                <h3><a href="#">USGS Water Quality Web Service</a></h3>
                <div><p>The US Geological Survey (USGS) publishes water quality information for thousands of sites across the United States. This dataset allows you to search and view water quality data.</p></div>
	      </div>
	    </div>
	    <!-- RESULTS TAB -->
	    <div id="tabs-2">
              <div id="progressBar"></div>
	      <p id="status">Search results will be displayed within this tab.</p>
              <div id="results" style="min-height: 550px; max-height: 550px; overflow: auto;"></div>
	    </div>
        </div>
      </div>

      <!-- DATA EXPLORER ERROR DIALOG -->
      <div id="errorDialog"></div>
      <!-- DATA EXPLORER ATTRIBUTE DIALOG -->
      <div id="attributeDialog"></div>
      <!-- DATA EXPLORER FOOTER -->
      <div id="footerArea">
        <hr class="ui-widget-content ui-corner-all"/>
        <p style="text-align: center;">Data Explorer 2011</p>
      </div>
    </div>
  </body>
</html>
